<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<!-- 
		HTML表单组建元素的验证属性
		- required  验证当前元素不能为空
		- pattern  验证当前元素输入的是否是跟正则表达式相匹配
		

	 -->
	<form action="#">
		<input type="text" id="username" required pattern="^[0-9a-zA-Z]{6-12}$">
		<input type="submit">
	</form>
	<script>
		var username = document.getElementById('username')
		console.log(username.validity);


		/*
		- validity属性由表单元素组建所提供；由此得到validityState对象，这个对象提供了一系列的验证属性
			setCustomValidity(message)
				- 作用：替换浏览器默认的错误提示信息
				- 注意：如果输入正确，必须将错误提示信息设置为空
		*/
		username.addEventListener('blur', function () {
			if (username.validity.valueMissing) {
				username.setCustomValidity('不能为空')
			}else{
				username.setCustomValidity('')
			}

			/*
				patternMismatch属性
					- 作用：配合元素中pattern属性来使用
			*/
			if (username.validity.patternMismatch) {
				username.setCustomValidity('格式错误')
			}else{
				username.setCustomValidity('')
			}

			/*
				- rangeOverflow：配合元素中max属性使用
				- rangeUnderflow：配合元素中min属性使用
				- stepMismatc：配合元素中step属性使用
				- tooLong：配合元素中maxlength属性使用
				- tooShort：配合元素中minlength属性使用
				- typeMismatch：配合<input type="url">等元素来使用
				- customError：配合setCustomValidity()方法使用
				- valid：验证当前元素是否验证通过
					* true：表示当前元素验证通过
					* false：表示当前元素验证不通过
			*/
		 })

	</script>
</body>

</html>